<template>
  <el-dialog title="手动选择时间退款" :visible.sync="dialogFormVisible" width="500px">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="left"
      label-width="110px"
      style="margin: 0 30px"
    >
      <template>
        <el-form-item label="订单号">
          <p>{{ temp.order_number }}</p>
        </el-form-item>
        <el-form-item label="仓口号">
          <p>{{ device_number }}</p>
        </el-form-item>
        <el-form-item label="操作码">
          <p>******</p>
        </el-form-item>

        <el-form-item label="选择收费时长" prop="duration_level">
          <el-select
            v-model="temp.duration_level"
            filterable
            placeholder="请选择"
            style="width: 160px"
            @change="changeDuration"
          >
            <el-option
              v-for="item in duration_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="item-amount">
            收费<b>{{ amount }}</b
            >元
          </span>
        </el-form-item>
        <el-form-item label="选择退款原因" prop="reason">
          <el-select v-model="temp.reason" filterable placeholder="请选择" style="width: 100%">
            <el-option
              v-for="(item, index) in refund_causes_options"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="temp.remark" type="textarea" />
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="saveData">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { manualRefund, manualUseAmount, getManualTimeSlots } from '@/api/orders'
import { DURATION_OPTIONS, DAILY_OPTIONS, REFUND_CAUSES_OPTIONS } from '@/utils/platform'

const rule = [{ required: true, message: '必填项不能为空' }]
export default {
  name: 'ManualRefund',
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      device_number: '',
      amount: '',
      temp: {
        order_number: '',
        duration_level: '',
        reason: '',
        remark: ''
      },
      duration_options: [],
      refund_causes_options: REFUND_CAUSES_OPTIONS,
      interval_time: '',
      trip_type: '',
      platform: '',
      rules: {
        duration_level: rule,
        reason: rule
      }
    }
  },

  created() {},
  mounted() {},
  methods: {
    async show(row) {
      const { device_number, amount, number, charging_mode } = row
      this.temp.order_number = number
      this.device_number = device_number
      this.amount = 0
      const manual_time = await getManualTimeSlots({ number })

      const options = manual_time.data.map((item) => {
        return {
          label: item.duration_label,
          value: item.duration_level
        }
      })

      this.duration_options = charging_mode === 'daily' ? DAILY_OPTIONS : options
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    },
    changeDuration(value) {
      console.log('value', value)
      manualUseAmount({ duration_level: value, order_number: this.temp.order_number }).then(
        (res) => {
          this.amount = res.data.amount
        }
      )
    },
    // 保存
    saveData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const d = JSON.parse(JSON.stringify(this.temp))
          manualRefund(d).then(() => {
            this.$parent.fetchData()
            this.dialogFormVisible = false
            this.$parent.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success'
            })
            this.temp = {
              order_number: '',
              duration_level: '',
              reason: '',
              remark: ''
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.item-p {
  margin: 0;
  /* height: 1px; */
}
.item-amount {
  margin-left: 5px;
  b {
    color: #409eff;
    font-weight: normal;
  }
}
</style>
